<template>
	<div class="hot">
		<div class="hot-top">
			<div class="hot-left">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
				<span>本周热门榜单</span>
			</div>
			<div class="hot-right">
				<span>全部榜单</span><i class="iconfont">&#xe912;</i>
			</div>
		</div>
		<ul class="hot-item">
			<li class="hot-list" v-for="item of imgList" :kety="item.id">
				<router-link to="/detail">
					<img :src=" item.img " class="img"/>
				</router-link>
				<p>{{ item.title }}</p>
				<div><span>￥{{item.price}}</span>起</div>
				<img v-if="item.imgs" :src="item.imgs" alt="" class="imgs"/>
			</li>
			
		</ul>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				"imgList":[
					{
						"id":"1",
						"img":"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_250x250_96f4c5f8.jpg",
						"title":"华清宫",
						"price":"107",
						"imgs":"http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png"
					},
					{
						"id":"2",
						"img":"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_250x250_c30b25dc.jpg",
						"title":"秦始皇陵博物院（兵马俑）",
						"price":"120",
						"imgs":"http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png"
					},
					{
						"id":"3",
						"img":"http://img1.qunarzz.com/sight/p0/1902/8a/8aa77504c364b4b6a3.img.jpg_250x250_f971fc56.jpg",
						"title":"大唐芙蓉园",
						"price":"108",
						"imgs":"http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png"
					},
					{
						"id":"4",
						"img":"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_250x250_de106da6.jpg",
						"title":"陕西历史博物馆",
						"price":"30"
					},
					{
						"id":"5",
						"img":"http://img1.qunarzz.com/sight/p0/1412/84/f696c67a8052bb60e6fc51b0f9ba7388.water.jpg_250x250_98036577.jpg",
						"title":"大明宫国家遗址公园",
						"price":"82"
					},
					{
						"id":"6",
						"img":"http://img1.qunarzz.com/sight/p0/1508/c5/a017645d82ab89f271fdfb1bd6ecc2e0.water.jpg_250x250_786e3a24.jpg",
						"title":"秦岭野生动物园",
						"price":"48"
					},
					{
						"id":"7",
						"img":"http://img1.qunarzz.com/sight/p0/1412/89/66dadfb4d982e6f88abad45a3e062342.water.jpg_250x250_10214324.jpg",
						"title":"曲江海洋极地公园",
						"price":"158"
					},
					{
						"id":"8",
						"img":"http://img1.qunarzz.com/sight/p0/1902/f4/f414efd234dad6cca3.img.jpg_250x250_18e0de15.jpg",
						"title":"西安城墙",
						"price":"60"
					},
					{
						"id":"9",
						"img":"http://img1.qunarzz.com/sight/p0/1505/ba/ba6ee76f5778a3a6.water.jpg_250x250_5ec513ad.jpg",
						"title":"西安半坡博物馆",
						"price":"49.8"
					},
					{
						"id":"10",
						"img":"http://img1.qunarzz.com/sight/p0/201403/10/d9d00b9ca4c645d5206626cf62cd7e75.jpg_250x250_11e2bb8d.jpg",
						"title":"梦回大唐",
						"price":"89.5"
					}
				]
			}
		}
	}
</script>
<style scoped>
	.hot{
		margin-top:0.2rem;
		width:100%;
		background:#fff;
	}
	.hot-top{
		padding:0.2rem;
	}
	.hot-left{
		float:left;
	}
	.hot-left img{
		width:15px;
		display:block;
		float:left;
	}
	.hot-left span{
		font-size:0.32rem;
		color:#212121;
		display:block;
		float:left;
		margin-left:0.1rem;
	}
	.hot-right{
		float:right;
		font-size:0.24rem;
		color:#616161;
	}
	.hot-item{
		padding:0.2rem;
		margin-top:0.3rem;
		white-space:nowrap;
		overflow-x:scroll;
		overflow-y:hidden;

	}
	.hot-list{		
		margin-right:0.15rem;
		display:inline-block;	
		width:2rem;	
		position:relative;
	}
	.img{
		display:block;
		width:100px;
		height:100px;
	}
	.hot-list p{
		margin-top:0.12rem;
		font-size:0.24rem;
		color:#212121;
		text-align:center;
		line-height:0.32rem;
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.hot-list span{
		font-size:0.28rem;
		color:#ff8300;
	}
	.hot-list div{
		font-size:0.24rem;
		color:#616161;
		line-height:0.36rem;
		text-align:center;
	}
	.imgs{
		position:absolute;
		top:0;
		left:0;
		width:0.84rem;
		height:0.4rem;
	}
</style>